<template>
  <div class="traceability-view">
    <!-- 头部导航 -->
    <div class="header-nav">
      <div class="nav-tabs">
        <div class="tab">公司名称</div>
        <div class="tab current">溯源管理</div>
        <div class="tab">企业管理</div>
        <div class="tab">平台设置</div>
        <div class="tab">我的管理</div>
      </div>
      <div class="header-actions">
        <el-button type="primary" size="small">导出</el-button>
        <el-button type="primary" size="small">导入</el-button>
        <el-button type="primary" size="small">导出模板</el-button>
      </div>
    </div>

    <div class="content-wrapper">
      <div class="main-content">
        <div class="search-section">
          <div class="search-form">
            <div class="form-row">
              <label>溯源编码：</label>
              <el-input v-model="searchForm.traceCode" placeholder="请输入溯源编码"></el-input>
            </div>
          </div>
          <el-button type="primary" @click="search">搜索</el-button>
        </div>

        <div class="data-table">
          <div class="table-header">
            <span>序号</span>
            <span>产品名称</span>
            <span>溯源编码</span>
            <span>生产日期</span>
            <span>生产企业</span>
            <span>状态</span>
            <span>操作</span>
          </div>

          <div 
            v-for="(item, index) in tableData" 
            :key="item.id"
            class="table-row"
            @click="selectRow(item)"
            :class="{ active: selectedRow?.id === item.id }"
          >
            <span>{{ index + 1 }}</span>
            <span>{{ item.productName }}</span>
            <span>{{ item.traceCode }}</span>
            <span>{{ item.productionDate }}</span>
            <span>{{ item.company }}</span>
            <span>
              <el-tag :type="item.status === '正常' ? 'success' : 'warning'">
                {{ item.status }}
              </el-tag>
            </span>
            <span class="actions">
              <el-button type="text" size="small" @click.stop="viewDetail(item)">查看</el-button>
              <el-button type="text" size="small" @click.stop="editItem(item)">编辑</el-button>
            </span>
          </div>
        </div>

        <div class="pagination">
          <el-pagination
            v-model:current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            layout="prev, pager, next"
            @current-change="handlePageChange"
          />
        </div>
      </div>
    </div>

    <!-- 详情弹窗 -->
    <el-dialog v-model="showDetailDialog" title="溯源详情" width="800px">
      <div class="detail-content">
        <div class="detail-section">
          <h4>基本信息</h4>
          <div class="detail-grid">
            <div class="detail-item">
              <span class="label">产品名称：</span>
              <span class="value">{{ currentItem?.productName }}</span>
            </div>
            <div class="detail-item">
              <span class="label">溯源编码：</span>
              <span class="value">{{ currentItem?.traceCode }}</span>
            </div>
            <div class="detail-item">
              <span class="label">生产日期：</span>
              <span class="value">{{ currentItem?.productionDate }}</span>
            </div>
            <div class="detail-item">
              <span class="label">生产企业：</span>
              <span class="value">{{ currentItem?.company }}</span>
            </div>
          </div>
        </div>

        <div class="detail-section">
          <h4>溯源信息</h4>
          <div class="trace-timeline">
            <div class="timeline-item" v-for="step in traceSteps" :key="step.id">
              <div class="timeline-dot"></div>
              <div class="timeline-content">
                <div class="step-title">{{ step.title }}</div>
                <div class="step-time">{{ step.time }}</div>
                <div class="step-description">{{ step.description }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="showDetailDialog = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 编辑弹窗 -->
    <el-dialog v-model="showEditDialog" title="编辑溯源信息" width="600px">
      <el-form :model="editForm" label-width="120px">
        <el-form-item label="产品名称：">
          <el-input v-model="editForm.productName"></el-input>
        </el-form-item>
        <el-form-item label="溯源编码：">
          <el-input v-model="editForm.traceCode"></el-input>
        </el-form-item>
        <el-form-item label="生产日期：">
          <el-date-picker v-model="editForm.productionDate" type="date"></el-date-picker>
        </el-form-item>
        <el-form-item label="生产企业：">
          <el-input v-model="editForm.company"></el-input>
        </el-form-item>
        <el-form-item label="状态：">
          <el-select v-model="editForm.status">
            <el-option label="正常" value="正常"></el-option>
            <el-option label="异常" value="异常"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showEditDialog = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 响应式数据
const searchForm = ref({
  traceCode: ''
})

const tableData = ref([
  {
    id: 1,
    productName: '兔头（麻辣味）',
    traceCode: 'TR20210718001',
    productionDate: '2021-07-18',
    company: '成都蜀安食品合成工有限公司',
    status: '正常'
  },
  {
    id: 2,
    productName: '兔头（微辣）',
    traceCode: 'TR20210718002',
    productionDate: '2021-07-18',
    company: '成都蜀安食品合成工有限公司',
    status: '正常'
  },
  {
    id: 3,
    productName: '冷兔条',
    traceCode: 'TR20210718003',
    productionDate: '2021-07-18',
    company: '成都蜀安食品合成工有限公司',
    status: '异常'
  }
])

const selectedRow = ref(null)
const currentItem = ref(null)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(30)

// 弹窗控制
const showDetailDialog = ref(false)
const showEditDialog = ref(false)

// 表单数据
const editForm = ref({
  productName: '',
  traceCode: '',
  productionDate: '',
  company: '',
  status: ''
})

// 溯源步骤数据
const traceSteps = ref([
  {
    id: 1,
    title: '原料采购',
    time: '2021-07-15 09:00:00',
    description: '采购新鲜兔肉原料，供应商：四川优质肉类供应商'
  },
  {
    id: 2,
    title: '原料检验',
    time: '2021-07-15 14:30:00',
    description: '对原料进行质量检验，检验合格'
  },
  {
    id: 3,
    title: '生产加工',
    time: '2021-07-18 08:00:00',
    description: '按照标准工艺进行生产加工'
  },
  {
    id: 4,
    title: '成品检验',
    time: '2021-07-18 16:00:00',
    description: '成品质量检验合格'
  },
  {
    id: 5,
    title: '包装入库',
    time: '2021-07-18 18:00:00',
    description: '产品包装完成，入库存储'
  }
])

// 方法
const search = () => {
  // 执行搜索逻辑
  ElMessage.success('搜索完成')
}

const selectRow = (row: any) => {
  selectedRow.value = row
}

const viewDetail = (item: any) => {
  currentItem.value = item
  showDetailDialog.value = true
}

const editItem = (item: any) => {
  currentItem.value = item
  editForm.value = { ...item }
  showEditDialog.value = true
}

const saveEdit = () => {
  // 保存编辑逻辑
  ElMessage.success('保存成功')
  showEditDialog.value = false
}

const handlePageChange = (page: number) => {
  currentPage.value = page
  // 重新加载数据
}

onMounted(() => {
  // 初始化数据加载
})
</script>

<style scoped>
.traceability-view {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}

.header-nav {
  background: white;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e6e6e6;
}

.nav-tabs {
  display: flex;
  gap: 30px;
}

.tab {
  padding: 15px 0;
  cursor: pointer;
  position: relative;
}

.tab.current {
  background: #409eff;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.content-wrapper {
  flex: 1;
  padding: 20px;
}

.main-content {
  background: white;
  border-radius: 8px;
  padding: 20px;
}

.search-section {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.search-form {
  flex: 1;
}

.form-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-row label {
  min-width: 80px;
  font-size: 14px;
}

.data-table {
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  margin-bottom: 20px;
}

.table-header {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 1fr 2fr 100px 120px;
  gap: 10px;
  padding: 12px;
  background: #f8f9fa;
  font-weight: 600;
  border-bottom: 1px solid #e6e6e6;
}

.table-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 1fr 2fr 100px 120px;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s;
}

.table-row:hover {
  background: #f8f9fa;
}

.table-row.active {
  background: #e8f4fd;
}

.actions {
  display: flex;
  gap: 8px;
}

.pagination {
  display: flex;
  justify-content: center;
}

.detail-content {
  max-height: 600px;
  overflow-y: auto;
}

.detail-section {
  margin-bottom: 30px;
}

.detail-section h4 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 15px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.detail-item {
  display: flex;
  align-items: center;
}

.detail-item .label {
  font-weight: 600;
  color: #666;
  min-width: 100px;
}

.detail-item .value {
  color: #333;
}

.trace-timeline {
  position: relative;
  padding-left: 30px;
}

.trace-timeline::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e6e6e6;
}

.timeline-item {
  position: relative;
  margin-bottom: 25px;
}

.timeline-dot {
  position: absolute;
  left: -25px;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #409eff;
  border: 2px solid white;
  box-shadow: 0 0 0 2px #409eff;
}

.timeline-content {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  border-left: 3px solid #409eff;
}

.step-title {
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.step-time {
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}

.step-description {
  color: #666;
  line-height: 1.5;
}
</style>


